<template>
  <div style='height: 100% width: 100%' id='main'></div>
</template>

<script>
import * as d3 from 'd3'
export default {
  data() {
    return {
      width: 600,
      height: 600
      // aqi:[],
      // v:[]
    }
  },
  mounted() {
    this.drawChart()
    // this.getChart()
  },
  methods: {
    async drawChart() {
      const res = await this.$http.get('/api/pollution_iaqi')
      var v = res.data.V
      var aqi = res.data.AQI
      this.getChart(aqi, v)
    },
    getChart(aqi, v) {
      const yy = this.width / 600
      var h = (this.height / 3) * Math.cos(Math.PI / 6)
      var svg = d3
        .select('#main')
        .append('svg')
        .attr('width', this.width)
        .attr('height', this.height)
      // 画圆
      // 创建一个弧生成器
      var arcPath = d3
        .arc()
        .innerRadius(0)
        .outerRadius((this.width / 6) * 2)
      //   添加路径
      svg
        .append('path')
        .attr('d', arcPath({ startAngle: 0, endAngle: Math.PI * 2 }))
        .attr(
          'transform',
          'translate(' + this.width / 2 + ',' + this.height / 2 + ')'
        )
        .attr('stroke', 'LightSkyBlue')
        .attr('stroke-width', '2px')
        .attr('fill', 'none')
      // 画线段
      var lines = [
        [this.width / 6, this.height / 2],
        [this.width / 3, this.height / 2 - h],
        [(this.width / 6) * 4, this.height / 2 - h],
        [(this.width / 6) * 5, this.height / 2],
        [(this.width / 6) * 4, this.height / 2 + h],
        [(this.width / 6) * 2, this.height / 2 + h],
        [this.width / 6, this.height / 2],
        [(this.width / 6) * 5, this.height / 2],
        [(this.width / 6) * 4, this.height / 2 - h],
        [(this.width / 6) * 2, this.height / 2 + h],
        [(this.width / 6) * 4, this.height / 2 + h],
        [this.width / 3, this.height / 2 - h]
      ]
      var linePath = d3.line()
      svg
        .append('path')
        .attr('d', linePath(lines))
        .attr('stroke', '#F0E68C')
        .attr('stroke-width', '2px')
        .attr('fill', 'none')
      // 画标签
      var p = ['SO2', 'NO2', 'CO', 'PM2.5', 'PM10', 'O3']
      var dd = [
        [this.width / 3, this.height / 2 - h],
        [(this.width / 6) * 4, this.height / 2 - h],
        [(this.width / 6) * 5, this.height / 2],
        [(this.width / 6) * 4, this.height / 2 + h],
        [(this.width / 6) * 2, this.height / 2 + h],
        [this.width / 6, this.height / 2]
      ]
      svg
        .selectAll('text')
        .data(p)
        .enter()
        .append('text')
        .style('text-anchor', 'middle')
        // .attr('transfrom', (d, i) => { console.log('translate(' + dd[i] + ')') })
        .attr('x', (d, i) => dd[i][0])
        .attr('y', (d, i) => dd[i][1])
        .attr('fill', 'black')
        .attr('font-size', yy * 16 + 'px')
        .text((d) => d)

      this.drawLegend(svg, yy)
      // 散点图
      var color = [
        '#00FF00',
        '#FFFF00',
        '#FF8C00',
        '#FF0000',
        '#FF00FF',
        '#800080'
      ]
      svg
        .selectAll('circle')
        .data(v)
        .enter()
        .append('circle')
        .attr('cx', (d) => {
          return this.width / 2 + (this.width / 3) * d[0]
          // console.log(this.width/2 + this.width/3 * d[0])
          // return d[0]
        })
        .attr('cy', (d) => {
          return this.height / 2 - (this.height / 3) * d[1]
          // return d[1]
        })
        .attr('r', yy * 2.5)
        .attr('fill', (d, i) => {
          if (aqi[i] > 0 && aqi[i] < 50) {
            return color[0]
          }
          if (aqi[i] > 50 && aqi[i] < 100) {
            return color[1]
          }
          if (aqi[i] > 100 && aqi[i] < 150) {
            return color[2]
          }
          if (aqi[i] > 150 && aqi[i] < 200) {
            return color[3]
          }
          if (aqi[i] > 200 && aqi[i] < 300) {
            return color[4]
          }
          if (aqi[i] > 300 && aqi[i] < 500) {
            return color[5]
          }
        })
    },
    drawLegend(svg, yy) {
      // 标题AQI
      svg
        .append('text')
        .attr('x', this.width - yy * 55)
        .attr('y', yy * 28)
        .attr('fill', 'black')
        .attr('font-size', yy * 20 + 'px')
        .text('AQI')
      // 图例
      var dataLegend = [
        {
          name: '0',
          color: '#00FF00'
        },
        {
          name: '50',
          color: '#FFFF00'
        },
        {
          name: '100',
          color: '#FF8C00'
        },
        {
          name: '150',
          color: '#FF0000'
        },
        {
          name: '200',
          color: '#FF00FF'
        },
        {
          name: '300',
          color: '#800080'
        },
        {
          name: '500',
          color: 'none'
        }
      ]
      // 初始化图例，将dataLegend与图例绑定
      // console.log(this.width/600)

      var legend = svg
        .selectAll('.legend')
        .data(dataLegend)
        .enter()
        .append('g')
        .attr('class', 'legend')
        .attr('transform', function(d, i) {
          // return 'translate(-30,' + (i * 30 + 30) + ')'
          return 'translate(-' + yy * 30 + ',' + (i + 1) * yy * 30 + ')'
        })
      // transform属性便是整个图例的坐标

      // 绘制文字后方的颜色框或线
      legend
        .append('rect')
        .attr('x', this.width - yy * 25) // width是svg的宽度，x属性用来调整位置
        // .attr('x', (width / 160) * 157)
        // 或者可以用width的分数来表示，更稳定一些，这是我试出来的，下面同
        .attr('y', yy * 12)
        .attr('width', yy * 40)
        .attr('height', yy * 30) // 设低一些就是线，高一些就是面，很好理解
        .style('fill', function(d) {
          return d.color
        })

      // 绘制图例文字
      legend
        .append('text')
        .attr('x', this.width * (1 - 1 / 20))
        // .attr('x', (width / 40) * 39)
        .attr('y', yy * 15)
        .style('text-anchor', 'end') // 样式对齐
        .attr('font-size', yy * 16 + 'px')
        .text(function(d) {
          return d.name
        })
    }
  }
}
</script>
